<template>
    <link rel="stylesheet" href="/assets/css/info.css" />
    <link rel="stylesheet" href="/assets/css/style.css" />
  
    <section class="aui-flexView">
      <!-- 订单详细 -->
      <section class="aui-scrollView">
          <!-- 订单状态 -->
          <div class="aui-pay-change">
              <div class="aui-flex">
                  <div class="aui-flex-box">
                      <h3>填写退货单</h3>
                  </div>
                  <div class="aui-pay-zfb">
                      <img src="/assets/images/icon-zfb.png" alt="" />
                  </div>
              </div>
          </div>
  
          <!-- 退货地址 -->
          <div class="aui-flex address">
              <div style="font-size: 20px">退货地址：</div>
              <div class="aui-flex-box">
                  <h3>
                      张三 <em>13060808099</em>
                  </h3>
                  <p>广东省广州市海珠区财智大厦</p>
              </div>
          </div>
      </section>
    </section>
  
    <!-- 商品卡片 -->
    <van-card
      v-for="(item, key) in product"
      :title="item.products.name"
      :thumb="item.products.thumbs_text"
      :num="item.pronum"
      @click-thumb="toProductInfo(item.proid)"
    >
      <template #title>
        <div class="title">{{item.products.name}}</div>
      </template>
  
      <!-- 卡片的插槽部分 -->
      <template #desc v-if="item.attrs">
        <van-tag v-for="(attr,index) in item.attrs" :key="index" class="tag" type="primary">{{attr.value}}</van-tag>
      </template>
  
      <template #desc v-else>
        <van-tag class="tag" type="danger">无规格数据</van-tag>
      </template>
  
      <template #tags>
        <div class="price">单价：￥{{item.price}}</div>
      </template>
  
      <template #price>
        <div class="price">合计：￥{{item.total}}</div>
      </template>
    </van-card>
  
    <!-- 寄件信息 -->
    <van-form @submit="submit">
      <van-field 
        label="物流公司"
        placeholder="点击选择物流公司"
        v-model="back.express_name"
        readonly
        is-link
        @click="ExpressShow = true"
      />
  
      <!-- 弹框组件 -->
      <van-popup v-model:show="ExpressShow" position="bottom">
        <van-picker
          title="选择物流"
          :columns="ExpressList"
          :columns-field-names="{text: 'name', value: 'id'}"
          @confirm="ExpressConfirm"
          @cancel="ExpressShow = false"
        />
      </van-popup>
  
      <van-field 
        label="寄件地址"
        placeholder="点击选择寄件地址"
        v-model="back.addr_name"
        readonly
        is-link
        @click="AddressShow = true"
      />
  
      <!-- 弹框组件 -->
      <van-popup v-model:show="AddressShow" position="bottom">
        <van-picker
          title="选择寄件地址"
          :columns="AddressList"
          :columns-field-names="{text: 'name', value: 'id'}"
          @confirm="AddressConfirm"
          @cancel="AddressShow = false"
        />
      </van-popup>
  
      <van-field
        v-model="back.expresscode"
        name="expresscode"
        label="物流单号"
        placeholder="请输入物流单号"
        :rules="[{required: true, message: '请输入物流单号'}]"
      />
  
      <van-field 
        v-model="back.remark"
        name="remark"
        rows="2"
        autosize
        label="退货备注"
        type="textarea"
        maxlength="120"
        placeholder="请输入退货备注"
        show-word-limit
        :rules="[{required: true, message: '请输入退货备注'}]"
      />
  
      <!-- 头像上传 -->
      <van-field name="thumbs" label="上传图集">
        <!-- 插槽重新输入框部分，用文件上传来代替 -->
        <template #input>
            <van-uploader multiple v-model="thumbs" :max-count="6" />
        </template>
      </van-field>
  
      <div style="width:50%;margin:2em auto;">
        <van-button :loading="loading" round block color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)" native-type="submit">提交</van-button>
      </div>
  
    </van-form>
  </template>
  
  <script setup>
    const {proxy} = getCurrentInstance()
    
    let orderid = proxy.$route.query.orderid ? proxy.$route.query.orderid : 0
    let loading = ref(false)
    let product = ref([])
    let address = ref(null)
    let order = ref({})
    let back = ref({
      expressid: 0,
      express_name: '',
      addrid: 0,
      addr_name: '',
      remark: '',
    })
  
    let thumbs = ref([])
  
    // 物流快递公司
    let ExpressShow = ref(false)
    let ExpressList = ref([])
  
    //寄件地址
    let AddressShow = ref(false)
    let AddressList = ref([])
  
    onBeforeMount(() => {
      OrderData()
      ExpressData()
      AddressData()
    })
  
    const OrderData = async () =>
    {
      var params = {
        orderid:orderid,
        busid: proxy.$business.value.id
      }
  
      var result = await proxy.$POST({
        url: '/order/info',
        params
      })
      
      if(result.code == 0)
      {
        proxy.$fail(result.msg)
        return false
      }
  
      address.value = result.data.address
      order.value = result.data.order
  
      if(result.data.product)
      {
        result.data.product.map(item => item.attrs = JSON.parse(item.attrs))
      }
  
      product.value = result.data.product    
  
    }
  
    const ExpressData = async () =>
    {
      var result = await proxy.$POST({url: '/express/index'})
  
      if(result.code == 0)
      {
        proxy.$fail(result.msg)
        return false
      }
  
      ExpressList.value = result.data
    }
  
    const AddressData = async () =>
    {
      var result = await proxy.$POST({
        url: '/address/index',
        params: {
          busid: proxy.$business.value.id
        }
      })
  
      if(result.code == 0)
      {
        proxy.$fail(result.msg)
        return false
      }
      
      var list = []
  
      result.data.map((item) => {
        list.push({
          id: item.id,
          name: `${item.region_text} ${item.address} (${item.mobile})`
        })
      })
  
      AddressList.value = list
    }
  
  
    //物流确认方法
    const ExpressConfirm = async ({selectedOptions}) =>
    {
      ExpressShow.value = false
  
      back.value.expressid = selectedOptions[0].id
      back.value.express_name = selectedOptions[0].name
    }
  
    //寄件地址确认方法
    const AddressConfirm = async ({selectedOptions}) =>
    {
      AddressShow.value = false
  
      back.value.addrid = selectedOptions[0].id
      back.value.addr_name = selectedOptions[0].name
    }
  
    //跳转到商品详情界面
    const toProductInfo = proid => proxy.$router.push({path: '/product/info', query: {proid}})
  
    //表单提交
    const submit = async (values) =>
    {
      // loading.value = true
  
      if(!back.value.expressid)
      {
        proxy.$fail('请选择物流公司')
        return false
      }
  
      if(!back.value.addrid)
      {
        proxy.$fail('请选择寄件地址')
        return false
      }
  
      var params = {
        busid: proxy.$business.value.id,
        orderid: orderid,
        expressid: back.value.expressid,
        expresscode: back.value.expresscode,
        addrid: back.value.addrid,
        remark: back.value.remark,
        thumbs: [],
      }

      
  
      if(values.thumbs.length > 0)
      {
        values.thumbs.map((item) => {
          params.thumbs.push(item.file)
        })
      }
      
      //接口调用
      if(params.thumbs.length > 0) //有图片
      {
          var result = await proxy.$UPLOAD({
              url: '/back/add',
              params
          })
      }else  //没有图片
      {
          var result = await proxy.$POST({
              url: '/back/add',
              params
          })
      }
      
      if(result.code == 0)
      {
        proxy.$fail(result.msg)
        return false
      }else
      {
        proxy.$success({
          message: result.msg,
          onClose: () => proxy.$router.go(-1)
        })
        return false
      }
    }
  
  </script>

<style scoped>
h3{
    font-size: 21px;
}
</style>